<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <header>
        <div class="navBar">
            <div class="titleLeft">
                <a href="#" class="titleLink">
                    开课吧首页
                </a>
                <a href="#" class="titleLink">
                    创业微学院
                </a>
                <a href="#" class="titleLink">
                    摄影微学院
                </a>
                <a href="#" class="titleLink">
                    微聚
                </a>
                <a href="#" class="titleLink">
                    论坛
                </a>
            </div>
            <div class="titleRight">
                <a href="#" class="titleLink">登录/注册</a>
                <a href="#" class="titleLink">播放记录</a>
                <a href="#" class="titleLink">APP下载</a>
            </div>
        </div>
    </header>
    <nav class="sub-nav">
        <div class="titleLeft">
            <a href="#" class="titleLink2">
                <span style="font-size:30px">摄影</span>
                <span style="font-size:20px">开课吧</span>
            </a>
        </div>
        <a href="#">个人中心</a>
        <a href="#">视频播放</a>
        
        </div>
    </nav>
    <!-- 轮播图 -->
    <div class="banner">
    </div>
    <div class="container">
        <div class="section-title">最热视频-大家都在看</div>
        <div class="video-grid">
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=1" alt="视频1">
            </div>
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=2" alt="视频2">
            </div>
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=3" alt="视频3">
            </div>
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=4" alt="视频4">
            </div>
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=5" alt="视频5">
            </div>
            <div class="video-item">
                <img src="https://picsum.photos/300/200?random=6" alt="视频6">
            </div>
        </div>
        <div class="section-title" style="margin-top: 40px;">大咖推荐-看看牛人分享</div>
        <div class="recommend-grid">
            <div class="recommend-item">
                <img src="https://picsum.photos/600/400?random=7" alt="推荐1">
            </div>
            <div class="recommend-item">
                <img src="https://picsum.photos/600/400?random=8" alt="推荐2">
            </div>
            <div class="recommend-item">
                <img src="https://picsum.photos/600/400?random=9" alt="推荐3">
            </div>
            <div class="recommend-item">
                <img src="https://picsum.photos/600/400?random=10" alt="推荐4">
            </div>
        </div> 
</body>
<style>
      @import url("homePage.css")
    </style>
</html>